<template>
    <div class="container">
        <div class="box">
            <PhaseData/>
        </div>
        <div class="box">
            <EquipmentInfo/>
        </div>
        <div class="box half-box">
            <SwitchController/>
        </div>
        <div class="box half-box">
            <WarningTrip/>
        </div>
    </div>
</template>

<script setup>
import PhaseData from "../components/PhaseData.vue";
import EquipmentInfo from "../components/EquipmentInfo.vue";
import SwitchController from "../components/SwitchController.vue";
import WarningTrip from "../components/WarningTrip.vue";
import request from "../utils/request.ts";
import {onMounted, ref} from "vue";

// 下面是后端数据模拟，例如设备信息：
// import {equInfoInterface} from '../interface/equInfoInterface.js'
// const equInfoData = ref<equInfoInterface>([])
// const fetchEquInfoData = async () =>{
//     //假如返回的值一个是code：200，一个是data
//     const {data} = await request.get('/equInfoData')
//     equInfoData.value = data
// }
// onMounted(()=>{
//     fetchEquInfoData()
// })
// 后面通过props传递给相应子组件即可
</script>

<style scoped>
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.box {
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.container .box:nth-child(1) {
    flex: 0 0 100%;
}
.container .box:nth-child(2) {
    flex: 0 0 100%;
}
/* 第三排：两个盒子平分整行 */
.container .half-box {
    flex: 0 0 calc(50% - 5px); /* 减去一半的间隙 */
}
</style>
